<head>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1649046_nz4g233pyi.css">
</head>
<div class="phone_hide">
    <div class="tou">
        <div class="main-md">
            <div class="revi-header">
                <div class="revi-header-lf">
                    <a href="#" class="revi-logo-img"> <img src="images/index/logo.png" alt="" /> </a>
                </div>
                <div class="revi-header-nav">
                    <ul>
                        <li><a href="@"> 首页 </a></li>
                        <li><a href="@">音频 </a></li>
                        <li><a href="@"> 文章 </a></li>
                        <li><a href="@">专栏 </a></li>
                        <li><a href="@">会员服务 </a></li>
                    </ul>
                </div>
                <div class="revi-header-rt">
                    <div class="revi-header-shose">
                        <a href="#"><i class="iconfont icon-sousuo"></i></a>
                    </div>
                    <div class="revi-header-guan">
                        <span>关注微信公众号</span>

                        <div class="revi-header-hide">
                            <img src="images/index/wei.jpg" alt="">
                        </div>
                    </div>
                    <!-- 个人中心 登录之后会有 这个通知 如果有通知是红色的 active-->
                    <div class="tongzhi"><a href="#"><i class="iconfont icon-xiaoxi1 active"></i></a>  </div>
                    <div class="revi-header-btn">
                        <a href="#">登录 </a>
                        <a href="#">注册 </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="phone_show">
    <div class="ding">
        <div class="top">
            <div class="main-md">
                <p class="lf">欢迎进入衍射！
                </p>
                <a href="#" class="rt"> 登录 </a>
                <a href="#" class="rt"> 注册 </a>
                <div class="both"></div>
            </div>
        </div>
    </div>
    <div class="head-phone">
        <div class="head-logo lf">
            <a href="./">
                <span><img src="images/index/logo.png" alt=""></span>
            </a>
        </div>
        <div class="top_cen rt">
            <a href="javascript:;" id="head-phone">
                <span></span>
                <span></span>
                <span></span>
            </a>
            <a class="cen_x active" href="javascript:;">
                ×
            </a>
        </div>
        <ul class="navlist_mo">
            <li><a href="@"> 首页 </a></li>
            <li><a href="@">音频 </a></li>
            <li><a href="@"> 文章 </a></li>
            <li><a href="@">专栏 </a></li>
            <li><a href="@">会员服务 </a></li>
        </ul>
    </div>
</div>
<script>
    $(function () {
        //点击切换导航栏按钮  手机端
        $('.head-phone').on('click', '.top_cen a', function () {
            console.log(111);
            if ($(this).attr('class') != 'active') {
                $(this).addClass('active');
                $(this).siblings().removeClass('active');
            } else {
                $(this).removeClass('active');
                $(this).siblings().addClass('active');
            }
            if ($(this).attr('class') != 'cen_x active') {
                $('body').css('right', '50%');
                $('.nav_bg').fadeIn();
                $('.navlist_mo').css('right', '0');
            } else {
                $('body').css('right', '0');
                $('.nav_bg').fadeOut();
                $('.navlist_mo').css('right', '-50%');
            }
        });
        //侧边栏点击切换效果  手机端
        $('.head-phone').on('click', '.mo>a', function () {
            if ($(this).parent().attr('class') != 'mo active') {
                $(this).parent().addClass('active');
                $(this).parent().siblings().removeClass('active');
            } else {
                $(this).parent().removeClass('active');
            }
        });

    })
</script>